<template>
  <view class="styleMajorList">
    <scroll-view
      class="styleScrollView"
      scroll-y="true"
      @scrolltoupper="onRefreshOfSearch"
      @scrolltolower="onLoadMoreOfSearch"
      :upper-threshold="50"
      :lower-threshold="50"
    >
      <view class="styleItem" v-for="(item, index) in list" :key="index" @click="clickItem(item)">
        <rich-text class="styleName" :nodes="highLightText(item.positionName)"></rich-text>
        <view class="styleLine" v-if="index != list.length - 1"></view>
      </view>
    </scroll-view>
  </view>
  
</template>
<script>
export default {
  props: {
    keywork: {
      type: String,
      default: '',
    },
    list: {
      type: Array,
      default: [],
    },
  },

  data() {
    return {
    };
  },
  methods: {
    highLightText(content) {
      if (!content) {
        return;
      }
      const regex = new RegExp(this.keywork, 'gi');
      const highlightedText = content.replace(regex, '<span style="color:#F75A3E;">' + this.keywork + '</span>');
      return highlightedText;
    },
    clickItem(item) {
      this.$emit('selectedCell', item);
    },

   

    onLoadMoreOfSearch() {
      console.log('----onLoadMore');
    },
    onRefreshOfSearch() {
      console.log('---onRefreshOfSearch');
      // this.triggered = true;
      // this.getData(false);
    },
  },
};
</script>

<style lang="scss" scoped>
.styleMajorList {
  background-color: transparent;
  margin-top: 12rpx;

  .styleScrollView {
    height: calc(100vh - 470rpx);

    .styleItem {
      display: flex;
      flex-direction: column;
      width: 100vw;
      justify-content: center;

      .styleName {
        font-weight: 400;
        color: #222222;
        line-height: 40rpx;
        font-size: 30rpx;
        margin-top: 36rpx;
        margin-left: 32rpx;
        margin-right: 32rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .styleLine {
        margin-left: 32rpx;
        margin-right: 32rpx;
        height: 2rpx;
        background: #dde7f9;
        margin-top: 36rpx;
      }
    }
  }
}
</style>
